<script setup>
import {onBeforeUnmount, onMounted, ref} from 'vue'
import './index.js'

const mouseCoordinate = ref({
  x: null,
  y: null,
})
const dom = ref()
const showImg = ref(false)

const init = e => {
  mouseCoordinate.value.x = e.offsetX
  mouseCoordinate.value.y = e.offsetY
  showImg.value = true
}

const handleTreeData = (arr) => {
  arr.forEach(item => {
    if (item.children && item.children.length === 0) {
      delete item.children
    } else {
      handleTreeData(item.children)
    }
  })
}




onMounted(() => {
  dom.value.addEventListener('mousemove', init)
})
onBeforeUnmount(() => {
  dom.value.removeEventListener('mousemove', init)
})

const url = new URL('https://ts1.cn.mm.bing.net/th/id/R-C.687fe60a09f28b4ebbdc12ed291ed51a?rik=lPdwGShkIIstmw&riu=http%3a%2f%2fwww.heisha.net%2fueditor%2fphp%2fupload%2fimage%2f20190727%2f1564217424125545.jpg&ehk=Hl8Grl1XWwltfCQUhxD6SqyUEGRYFelSEpzwKtY4YyE%3d&risl=&pid=ImgRaw&r=0')
console.log(url)
</script>

<template>
  <div class="page" ref="dom" style="cursor: none">
    {{ mouseCoordinate }}
    <img
        src="https://gd-hbimg.huaban.com/f69930849c2dece2f2e652b8f784d723b6bcadb3acc6-6PkhS6_fw480webp"
        alt=""
        height="55"
        :style="{
        position:'absolute',
        top: mouseCoordinate.y + 'px',
        left: mouseCoordinate.x + 'px',
      }"
    />
  </div>

</template>

<style scoped lang="scss">
$url: v-bind(url);


.page {
  width: 100%;
  height: 100%;
  position: relative;

}

</style>
